<template>
  <div class="page-content">
    <!-- 顶部导航 -->
    <header class="bg-white shadow-sm sticky top-0 z-10">
      <div class="container mx-auto px-4 py-3 flex items-center">
        <router-link to="/" class="mr-2">
          <i class="fas fa-arrow-left text-gray-600"></i>
        </router-link>
        <h1 class="text-lg font-semibold">企业展示</h1>
      </div>
    </header>

    <!-- 主要内容 -->
    <main class="container mx-auto px-4 mt-4 pb-20">
      <!-- 企业信息卡片 -->
      <div class="bg-white rounded-xl shadow-md p-6 mb-6">
        <div class="flex items-center mb-4">
          <div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mr-4">
            <i class="fas fa-building text-2xl text-blue-600"></i>
          </div>
          <div>
            <h2 class="text-xl font-bold text-gray-800">要素式法律服务</h2>
            <p class="text-gray-500">专业的法律文书生成平台</p>
          </div>
        </div>
        
        <div class="border-t pt-4">
          <div class="grid grid-cols-2 gap-4">
            <div class="text-center">
              <div class="text-2xl font-bold text-blue-600">10,000+</div>
              <div class="text-sm text-gray-500">用户数量</div>
            </div>
            <div class="text-center">
              <div class="text-2xl font-bold text-green-600">50,000+</div>
              <div class="text-sm text-gray-500">生成文书</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 服务特色 -->
      <div class="bg-white rounded-xl shadow-md p-6 mb-6">
        <h3 class="text-lg font-semibold mb-4">服务特色</h3>
        <div class="space-y-4">
          <div class="flex items-start">
            <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3 mt-1">
              <i class="fas fa-check text-blue-600 text-sm"></i>
            </div>
            <div>
              <h4 class="font-medium text-gray-800">智能文书生成</h4>
              <p class="text-gray-600 text-sm">基于AI技术，快速生成专业法律文书</p>
            </div>
          </div>
          
          <div class="flex items-start">
            <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3 mt-1">
              <i class="fas fa-shield-alt text-green-600 text-sm"></i>
            </div>
            <div>
              <h4 class="font-medium text-gray-800">专业法律保障</h4>
              <p class="text-gray-600 text-sm">资深律师团队审核，确保文书质量</p>
            </div>
          </div>
          
          <div class="flex items-start">
            <div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center mr-3 mt-1">
              <i class="fas fa-clock text-purple-600 text-sm"></i>
            </div>
            <div>
              <h4 class="font-medium text-gray-800">高效便捷</h4>
              <p class="text-gray-600 text-sm">24小时在线服务，随时随地生成文书</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 产品展示 -->
      <div class="bg-white rounded-xl shadow-md p-6 mb-6">
        <h3 class="text-lg font-semibold mb-4">核心产品</h3>
        <div class="grid grid-cols-2 gap-4">
          <div class="bg-gray-50 rounded-lg p-4 text-center">
            <i class="fas fa-file-alt text-3xl text-blue-600 mb-2"></i>
            <h4 class="font-medium text-gray-800">诉状生成</h4>
            <p class="text-xs text-gray-500 mt-1">智能生成各类诉讼文书</p>
          </div>
          
          <div class="bg-gray-50 rounded-lg p-4 text-center">
            <i class="fas fa-exchange-alt text-3xl text-green-600 mb-2"></i>
            <h4 class="font-medium text-gray-800">文书转换</h4>
            <p class="text-xs text-gray-500 mt-1">快速转换文书格式</p>
          </div>
          
          <div class="bg-gray-50 rounded-lg p-4 text-center">
            <i class="fas fa-gavel text-3xl text-purple-600 mb-2"></i>
            <h4 class="font-medium text-gray-800">答辩状</h4>
            <p class="text-xs text-gray-500 mt-1">专业答辩文书生成</p>
          </div>
          
          <div class="bg-gray-50 rounded-lg p-4 text-center">
            <i class="fas fa-tools text-3xl text-orange-600 mb-2"></i>
            <h4 class="font-medium text-gray-800">法律工具</h4>
            <p class="text-xs text-gray-500 mt-1">丰富的法律辅助工具</p>
          </div>
        </div>
      </div>

      <!-- 联系方式 -->
      <div class="bg-white rounded-xl shadow-md p-6">
        <h3 class="text-lg font-semibold mb-4">联系我们</h3>
        <div class="space-y-3">
          <div class="flex items-center">
            <i class="fas fa-phone text-blue-600 w-6"></i>
            <span class="ml-3 text-gray-700">400-123-4567</span>
          </div>
          <div class="flex items-center">
            <i class="fas fa-envelope text-blue-600 w-6"></i>
            <span class="ml-3 text-gray-700">service@lawdoc.com</span>
          </div>
          <div class="flex items-center">
            <i class="fas fa-map-marker-alt text-blue-600 w-6"></i>
            <span class="ml-3 text-gray-700">北京市朝阳区法律大厦</span>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  name: 'EnterpriseDisplay'
}
</script>

<style scoped>
.page-content {
  min-height: 100vh;
  background: #f5f5f5;
}
</style>